<template>
  <el-container>
    <el-header>
      <Header></Header>
    </el-header>
    <div
      style="height: 1px; background-color: grey; margin-top: 6px; opacity: 0.4"
    ></div>
    <div style="height: 45px; display: flex; align-items: center">
      <el-tag
        effect="plain"
        type="info"
        style="border: none; font-size: 18px; margin-left: 30px"
        >{{ typeName }}</el-tag
      >
    </div>
    <div
      style="
        height: 1px;
        background-color: lightgrey;
        margin-top: 0px;
        opacity: 0.4;
      "
    ></div>
    <div class="wrap">
      <div
        class="wrap-content"
        v-for="(goods, index) in goodslist"
        :key="index"
        @click="show(goods)"
      >
        <el-image
          style="margin-top: 60px; margin-left: 70px; width: 65%; height: 65%"
          :src="goods.image"
        ></el-image><br/>
        <div style="margin-top: 40px; margin-left: 90px; font-size: 18px">
          {{ goods.name }}
        </div>
      </div>
    </div>

    <el-footer>
      <div
        style="
          height: 1px;
          background-color: grey;
          margin-top: 6px;
          opacity: 0.4;
        "
      ></div>

      <div style="margin-left: 30px">优坊</div>
      <div
        style="
          height: 1px;
          background-color: grey;
          margin-top: 20px;
          opacity: 0.4;
        "
      ></div>
    </el-footer>
  </el-container>
</template>

<script>
import Header from "@/views/Header.vue";
import { getGoods } from "@/api/goods.js";
import { getById } from "@/api/type.js";
export default {
  components: { Header },
  data() {
    return {
      typeid: "",
      typeName: "",
      goodslist: [],
    };
  },
  created() {
    this.typeid = this.$route.query.typeId;
    this.loadGoods();
    this.loadTypeName();
  },
  methods: {
    loadGoods() {
      getGoods(this.typeid).then((res) => {
        if (res.data.code == "0000") {
          this.goodslist = res.data.data;
        }
      });
    },
    loadTypeName() {
      getById(this.typeid).then((res) => {
        if (res.data.code == "0000") {
          this.typeName = res.data.data.name;
        }
      });
    },
    show(goods) {
      this.$router.push({ path: "/detail", query: { goods: goods } });
    },
  },
};
</script>

<style lang="scss" scoped>
.el-header {
  background-color: white;
  color: #333;
  text-align: center;
  line-height: 60px;
  padding-bottom: 20px;
}
.el-main {
  background-color: white;
  color: #333;
  text-align: center;
  line-height: 100%;
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
.leftgoods {
  border-right: 1px solid gainsboro;
}
.dleftgoods {
  float: left;
  flex: 1;
  border-right: 1px solid gainsboro;
}
.dmidgoods {
  float: left;
  flex: 1;
  border-right: 1px solid gainsboro;
}
.drightgoods {
  float: left;
  flex: 1;
}
.parent {
  display: flex;
  height: 300px;
  border-bottom: 1px solid lightgray;
}
.parent > div {
  background-color: white;
}
.rightgoods > div {
  height: 50%;
}
.jj {
  height: 50px;
}
.wrapper{
  margin-top:px;
  width: 100%;
  height: auto;
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  flex-wrap: wrap;
}

.wrap-content {
  background-color: lightgrey;
  float: left;
  width: 33%;
  height: 400px;
  background: white;
}
</style>
